<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('信息一体化')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <link rel="stylesheet" th:href="@{/res/bonorsoft/css/common.css}"/>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 区划展示
            </div>
        </div>
        <div class="ui-layout-content">
            <div class="ztree" id="tree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="w100 h100 bdgray" id="map"></div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script src="//api.map.baidu.com/api?v=3.0&ak=3VCZZqMyMSWu7dAzq0Np6kr31MCm1P4Y"></script>
<script th:inline="javascript">
    let map;
    let markers;
    let content;

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 345});
        queryDeptTree();
        initMap();
    });

    function queryDeptTree() {
        var url = ctx + "control/infor/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            //子节点点击事件
            if (!treeNode.isParent) {
                $.get($.common.setURL(ctx + "control/infor/getLatitude/" + treeNode.id), function (res) {
                    if (res.success) {
                        const result = res.result;
                        let button = "";
                        markers = result.detail;
                        if (result.build) {
                            button = '<div class="row">' +
                                '<div class="col-sm-offset-5 col-sm-10">' +
                                '<button class="btn btn-sm btn-success" onclick="showHouse(\'' + markers.dzbm + '\')" type="button"><i class="fa fa-home" style="padding-right: 5px;"></i>实有房屋</button>&nbsp;' +
                                '</div>' +
                                '</div>';
                        }
                        if (result.unit) {
                            button = '<div class="row">' +
                                '<div class="col-sm-offset-5 col-sm-10">' +
                                '<button class="btn btn-sm btn-success" onclick="showUnit(\'' + markers.dzbm + '\')" type="button"><i class="fa fa-bank" style="padding-right: 5px;"></i>实有单位</button>' +
                                '</div>' +
                                '</div>';
                        }
                        if (!(result.build || result.unit)) {
                            button = '<div class="row">' +
                                '<div class="col-sm-offset-4 col-sm-10">' +
                                '<button class="btn btn-sm btn-primary" onclick="submitHouse(\'' + markers.dzbm + '\')" type="button"><i class="fa fa-plus" style="padding-right: 5px;"></i>实有房屋</button>&nbsp;' +
                                '<button class="btn btn-sm btn-primary" onclick="submitUnit(\'' + markers.dzbm + '\')" type="button"><i class="fa fa-plus" style="padding-right: 5px;"></i>实有单位</button>' +
                                '</div>' +
                                '</div>';
                        }

                        content = '<div style="padding: 5px 0 10px 0">' +
                            (markers.bmjc != null ? '别名简称：' + markers.bmjc + ';<br>' : '') +
                            '地址：&emsp;&emsp;' + markers.dzmc + ';<br>' +
                            '详细地址：&emsp;&emsp;' + markers.qhnxxdz + ';<br>' +
                            button +
                            '</div>';
                        addMapOverlayMarker();
                    }
                })
            }
        }
    }

    function submitHouse(id) {
        $.modal.open("添加实有房屋", $.common.setURL("/control/house/add/" + id));
    }

    function showHouse(id) {
        var url = '/control/house/showHouse/' + id;
        detail(url, "实有房屋");
    }

    function submitUnit(id) {
        $.modal.open("添加实有单位", $.common.setURL("/control/unit/add/" + id));
    }

    function showUnit(id) {
        var url = '/control/unit/showHouse/' + id;
        detail(url, "实有单位");
    }

    function closeNowTab() {
        initMap();
    }

    // 详细信息
    function detail(url, name, width, height) {
        table.set();
        var _width = $.common.isEmpty(width) ? "800" : width;
        var _height = $.common.isEmpty(height) ? ($(window).height() - 50) : height;
        //如果是移动端，就使用自适应大小弹窗
        if ($.common.isMobile()) {
            _width = 'auto';
            _height = 'auto';
        }
        var options = {
            title: name + "详细",
            width: _width,
            height: _height,
            url: url,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                layer.close(index);
            }
        };
        $.modal.openOptions(options);
    }

    //=============地图方法========
    function initMap() { //创建和初始化地图函数：
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlayMarker();//向地图添加标记点
        //addMapOverlayPolyline(); //向地图添加标记线
    }

    function createMap() {
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(118.58143, 37.578556), 12);
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    function addMapControl() {
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]})); // 卫星地图跟普通地图切换

        let scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);

        let navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);

        let overviewControl = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true});
        map.addControl(overviewControl);

    }

    function addMapOverlayMarker() {
        // 在地图上添加标记点
        if (markers) {
            let point = new BMap.Point(markers.zxdhzb, markers.zxdzzb);
            // let marker = new BMap.Marker(point, {icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {imageOffset: new BMap.Size(0, 3)})});
            let marker = new BMap.Marker(point,{icon:new BMap.Icon("/res/img/dd.gif",new BMap.Size(20,25) )});
            map.addOverlay(marker);

            // 标记点对应的信息窗口
            let opts = {width: 500, title: (markers.jzwmc ? markers.jzwmc : markers.bmjc),};
            let infoWindow = new BMap.InfoWindow(content, opts);

            // 监听标记点的点击事件
            addClickHandler(marker, infoWindow);
        }


    }

    function addClickHandler(target, window) {
        target.addEventListener("click", function () {
            target.openInfoWindow(window);
        });
    }

    function addMapOverlayPolyline() {
        let plOpts = [
            {strokeColor: "#f00", strokeWeight: "4", strokeOpacity: "0.6"}
        ];
        let plPath = [
            [
                new BMap.Point(118.67709, 37.642055),
                new BMap.Point(118.724233, 37.641598),
                new BMap.Point(118.715034, 37.592205),
                new BMap.Point(118.670766, 37.607758),
                new BMap.Point(118.676515, 37.641598),
                new BMap.Point(118.676515, 37.641598),
                new BMap.Point(118.676515, 37.641598)
            ],
        ];
        for (let index = 0; index < plOpts.length; index++) {
            let polyline = new BMap.Polyline(plPath[index], plOpts[index]);
            map.addOverlay(polyline);
        }
    }

</script>
</body>
</html>
